import {designPage, onMounted, useRefs} from "plain-design-composition";
import React from "react";
import {Plc, PlcIndex, PlIcon, PlPagination, PlTable} from "plain-design";
import './keyword-analysis.less'
import {DataStatisticHead} from "../data-statistic-head";
import {MicroLibService} from "@/micro/utils/MicroLibService";

const keywordList = [
    {name: 'iPadPro发售时间', userCount: 291, percent: '66.63%'},
    {name: '母亲节祝福', userCount: 755, percent: '47.41%'},
    {name: '比特币暴跌', userCount: 482, percent: '40.51%'},
    {name: '俄罗斯阅兵', userCount: 133, percent: '33.51%'},
    {name: '疫情失控对中国影响', userCount: 429, percent: '89.40%'},
]

export default designPage(() => {

    const {refs, onRef} = useRefs({
        userCountEl: HTMLDivElement,
        userAverageEl: HTMLDivElement,
    })

    async function renderChart(el: HTMLDivElement) {
        const browserData = new Array(24).fill(0).map(i => Math.ceil(Math.random() * 7) + 3)
        const echarts = await MicroLibService.load.echarts()
        const ins = echarts.init(el)
        ins.setOption({
            grid: {
                top: '0',
                left: '0',
                right: '0',
                bottom: '0',
            },
            xAxis: [
                {
                    show: false,
                    type: 'category',
                    boundaryGap: false,
                    data: new Array(24).fill(0).map(i => String(i))
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: false,
                    splitLine: {show: false},
                }
            ],
            series: [
                {
                    name: 'Line 3',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: 'rgba(55, 162, 255)'},
                            {offset: 1, color: 'rgba(116, 21, 219)'}
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: browserData
                },
            ]
        })
    }

    onMounted(() => {
        renderChart(refs.userCountEl!)
        renderChart(refs.userAverageEl!)
    })

    return () => (
        <div className="keyword-analysis">
            <DataStatisticHead icon="el-icon-search" title="热门搜索">
                <PlIcon icon="el-icon-menu" status="primary"/>
            </DataStatisticHead>
            <div className="keyword-analysis-charts">
                <div className="keyword-analysis-charts-item">
                    <div className="keyword-analysis-charts-item-title">
                        <span>搜索用户数</span>
                        <PlIcon icon="el-icon-warning-outline"/>
                    </div>
                    <div className="keyword-analysis-charts-item-data">
                        <span>23,378</span>
                        <span>16.8%</span>
                        <PlIcon icon="el-icon-caret-top" status="success"/>
                    </div>
                    <div className="keyword-analysis-charts-item-el" ref={onRef.userCountEl}/>
                </div>
                <div className="keyword-analysis-charts-item">
                    <div className="keyword-analysis-charts-item-title">
                        <span>平均搜索数</span>
                        <PlIcon icon="el-icon-warning-outline"/>
                    </div>
                    <div className="keyword-analysis-charts-item-data">
                        <span>10.5</span>
                        <span>6.1%</span>
                        <PlIcon icon="el-icon-caret-bottom" status="warn"/>
                    </div>
                    <div className="keyword-analysis-charts-item-el" ref={onRef.userAverageEl}/>
                </div>
            </div>
            <div className="keyword-analysis-list">
                <PlTable data={keywordList} showRows={5} bodyRowHeight={32} headRowHeight={36} size="mini">
                    <PlcIndex/>
                    <Plc title="搜索关键词" field="name" fit/>
                    <Plc title="用户数" field="userCount"/>
                    <Plc title="涨幅" field="percent"/>
                </PlTable>
                <PlPagination layout="sizes,prev,next,pager" size={'mini'} currentPage={1} pageSize={5} total={200} pageSizes={[5, 10, 20, 50, 100]}/>
            </div>
        </div>
    )
})